<style lang="less" scope>
  @import "../assets/css/config.less";
  .avatars{
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2600;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1210px;
    .header-row{
      height: 40px;
      margin: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      .title{
        font-size: 14px;
        font-weight: 600;
      }
      .el-icon-close:hover{
        color: @color2;
      }
    }
    .aera{
      padding: 20px;
      width: 100%;
      height: 600px;
      overflow: auto;
      
      .pic{
        float: left;
        margin: 10px auto;
        .avatar{
          width: 100px;
          height: 100px;
          display: inline-flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          &:hover{
            border: 1px solid @color2;
            border-radius: 4px;
            box-shadow: 0 0 4px 0 @color2;
          }
          img{
            width: 60px;
            height: 60px;
          }
        }
      }
    }
  }
</style>

<template>
  <div class="avatars">
    <div style="background-color: #fff;width:80%;border-radius: 6px;">
      <div class="header-row">
        <div class="title">选择头像</div>
        <Icon class="el-icon-close " @click="handleClose" size="20"/>
      </div>
      <div class="aera el-scrollbar__view">
        <div class="pic" v-for="i in 46" :key="i">
          <span class="avatar" @click="handleClick(`头像${i}.svg`)">
            <img :src="`../../static/pic/avatars/头像${i}.svg`" alt="">
            头像{{i}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import {changeAvatar} from "../api/api";
export default {
  name: "avatars",
  data(){
    return {
      user: null
    }
  },
  created(){
    this.user = JSON.parse(this.$store.state.user)
  },
  methods: {
    ...mapActions([
      'getUserMesAsync'
    ]),
    handleClick(data){
      let that = this
      changeAvatar({
        UUID: this.user.UUID,
        avatar: data
      }).then(res => {
        if(res.state === true) {
          this.getUserMesAsync()
          that.$Message.success('更换头像成功！');
          that.$emit('handleclose')
        } else {
          that.$Message.error('更换头像失败！');
        }
      }).catch(err => {
        that.$Message.error('更换头像失败！');
      })
    },
    handleClose(){
      this.$emit('handleclose')
    }
  }
}
</script>

